<template>
  <view class="org">
    <h1>
      感谢您参与到爱脑行动公益项目中，为配合您更好的开展公益工作，请填写您所在机构的信息，爱脑行动，感恩有您!
    </h1>
    <view class="upload_box">
      <view class="text1"> 营业执照 </view>
      <!-- 最多上传一张 -->
      <u-upload
        ref="upload"
        :previewFullImage="false"
        v-if="changeDom"
        :deletable="isShowDelPic"
        :disabled="examineStatus == 0"
        accept="image"
        maxCount="1"
        :fileList="fileList6"
        @afterRead="afterRead"
        @delete="deletePic"
        name="6"
        multiple
        :maxCount="1"
        width="610rpx"
        height="320rpx"
      >
        <view class="upload_img_bg">
          <image
            class="upload_img"
            src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/orgManger/camera.png"
            mode="widthFix"
          ></image>
          <text class="text2"> 拍照上传 </text>
        </view>
      </u-upload>
      <view class="text_box">
        <view class="text"> 支持JPG/PNG/JPEG格式图片，图片大小≦5M </view>
        <view class="text"> 营业执照原件彩色扫描件或加盖公章的复印件 </view>
      </view>
    </view>

    <view class="form">
      <u-form
        labelWidth="120"
        labelPosition="top"
        :rules="rules"
        :model="model1"
        ref="form1"
      >
        <u-form-item
          label="机构名称"
          prop="mechanismName"
          borderBottom
          ref="item1"
        >
          <u-input
            :disabled="examineStatus == 0"
            placeholder="必填"
            v-model="model1.mechanismName"
            border="none"
          >
          </u-input>
        </u-form-item>
        <view
          class=""
          style="padding-top: 30rpx; padding-left: 30rpx; padding-bottom: 10rpx"
        >
          <text
            style="
              font-size: 32rpx;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 600;
              color: #004751;
              line-height: 44rpx;
            "
            >银行账户信息</text
          >
          <text style="font-size: 24rpx; padding-left: 10rpx; color: #b1c32d"
            >该项用于结算</text
          >
        </view>
        <u-form-item label="银行账号" prop="bankAccount">
          <u-input
            :disabled="examineStatus == 0"
            placeholder="必填"
            v-model="model1.bankAccount"
            border="none"
          >
          </u-input>
        </u-form-item>
        <u-form-item label="开户行信息" prop="bankName">
          <u-input
            :disabled="examineStatus == 0"
            placeholder="必填"
            v-model="model1.bankName"
            border="none"
          >
          </u-input>
        </u-form-item>
        <u-form-item label="联系人" prop="contactsName">
          <u-input
            :disabled="examineStatus == 0"
            placeholder="必填"
            v-model="model1.contactsName"
            border="none"
          >
          </u-input>
        </u-form-item>
        <u-form-item label="联系方式" prop="contactsPhone">
          <u-input
            :disabled="examineStatus == 0"
            placeholder="必填"
            v-model="model1.contactsPhone"
            border="none"
          >
          </u-input>
        </u-form-item>
      </u-form>
    </view>

    <view class="org_footer">
      <!-- 未提交 审核被驳回 显示 -->
      <view class="" v-if="examineStatus !== 0">
        <view class="sumit" text="" @click="submit">提交认证</view>
        <!-- 	<view class="text11">
					请您如实填写，测评结果更准确
				</view> -->
      </view>
      <view class="" v-else>
        <view class="sumit" text="">您提交的资料正在审核中...</view>
        <view class="text11"> 审核状态资料暂时无法修改 </view>
      </view>
    </view>
    <view class="modal">
      <u-modal :show="failModalShow" width="231" :showConfirmButton="false">
        <view class="modal_content">
          <img
            src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/orgManger/right_err.png"
            style="height: 100rpx; width: 100rpx"
            alt=""
          />
          <view class="err"> 认证失败 </view>
          <view class="next_submit"> 请您核对信息后再次提交 </view>
          <view class="back_btn" @click="handleReset"> 重新认证 </view>
          <view class="msg">
            遇到问题,&nbsp;&nbsp;&nbsp;&nbsp;<text
              class="phone"
              @click="copyPhone('010-52230321')"
            >
              拨打客服电话</text
            >
          </view>
          <!-- 	<view class="phone" @click="copyPhone(123456)">
						拨打客户电话
					</view> -->
        </view>
        <u-toast ref="uToast"></u-toast>
      </u-modal>
    </view>
    <u-toast ref="uToast2"></u-toast>
  </view>
</template>

<script>
import { submitMechanism, uploadFile, auditStatus } from "@/api/api.js";
import { getUrl } from "@/config.js";
export default {
  data() {
    return {
      baseUrl: getUrl(),
      isShowDelPic: true,
      changeDom: true,
      failModalShow: false,
      examineStatus: undefined,
      // 上传
      fileList6: [],
      // 表单
      model1: {
        businessLicense: "",
        mechanismName: "",
        bankAccount: "",
        bankName: "",
        contactsName: "",
        contactsPhone: "",
      },
      rules: {
        mechanismName: [
          {
            required: true,
            message: "请输入机构名称",
            trigger: ["change"],
          },
        ],
        bankAccount: [
          {
            required: true,
            message: "请输入银行账号",
            trigger: ["change"],
          },
        ],
        bankName: [
          {
            required: true,
            message: "请输入开户行信息",
            trigger: ["change"],
          },
        ],
        contactsName: [
          {
            required: true,
            message: "请输入联系人姓名",
            trigger: ["change"],
          },
        ],
        contactsPhone: [
          {
            required: true,
            message: "请输入联系方式",
            trigger: ["change"],
          },
          {
            // 自定义验证函数
            validator: (rule, value, callback) => {
              // 返回true表示校验通过，返回false表示不通过
              return this.$u.test.mobile(value);
            },
            message: "请输入正确的手机号",
            // 触发器可以同时用blur和change
            trigger: ["blur", "change"],
          },
        ],
      },
      // 类型 0 审核中 1 审核通过 2被驳回
      type: "",
    };
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.form1.setRules(this.rules);
  },
  watch: {
    examineStatus(value) {
      if (value === 0) {
        this.isShowDelPic = false;
        this.changeDom = false;
        setTimeout(() => {
          this.changeDom = true;
        }, 300);
      }
    },
  },
  methods: {
    handleReset() {
      this.fileList6 = [];
      this.model1.businessLicense = "";
      this.failModalShow = false;
    },
    submit() {
      if (!this.model1.businessLicense) {
        this.$refs.uToast2.show({
          type: "default",
          message: "请上传您的营业执照",
        });
        return;
      }
      this.$refs.form1
        .validate()
        .then((res) => {
          // 调用提交的接口，无论是第一次提交还是审核失败后提交都是这个接口
          submitMechanism({
            ...this.model1,
          }).then(
            (res2222) => {
              // this.$refs.uToast2.show({
              // 	type: "success",
              // 	message: res.msg,
              // });
              auditStatus().then(
                (res) => {
                  const data = res.rows[0];
                  this.model1 = data;
                  this.examineStatus = data.examineStatus;
                  this.$refs.uToast2.show({
                    type: "success",
                    message: "提交成功",
                  });
                },
                (err) => {
                  this.$refs.uToast2.show({
                    type: "error",
                    message: err.msg,
                  });
                }
              );
            },
            (err) => {
              this.$refs.uToast2.show({
                type: "error",
                message: err.msg,
              });
            }
          );
        })
        .catch((errors) => {
          uni.$u.toast("请检查填写内容");
        });
    },
    // 复制 手机号
    copyPhone(data) {
      const _this = this;
      uni.setClipboardData({
        data: String(data),
        showToast: false,
        success: function () {
          wx.hideToast();
          uni.$u.toast("客服电话复制成功");
          // _this.$refs.uToast.show({
          // 	type: "success",
          // 	message: "手机号" + data + "复制成功",
          // });
        },
      });
    },
    // 删除图片的回调
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
      this.model1.businessLicense = "";
    },
    // 读取文件后的回调
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      // 其实吧，就一个 官方示例是一个数组，更具备通用性
      for (let i = 0; i < lists.length; i++) {
        const { msg } = await uploadFile(lists[i].url);
        const result = msg;
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(
            {},
            {
              status: "success",
              message: "",
              url: this.baseUrl + result,
            }
          )
        );
        console.log(
          this[`fileList${event.name}`],
          "this[`fileList${event.name}`]"
        );
        this.model1.businessLicense = result;
        fileListLen++;
      }
    },
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.form1.setRules(this.rules);
  },
  onLoad(option) {
    // 1.未提交过
    // 2.提交过 审核中
    // 3. 被驳回
    if (option.data) {
      const data = JSON.parse(option.data);
      const examineStatus = data.examineStatus;
      if (examineStatus == 0) {
        // 待审核
        this.examineStatus = examineStatus;
        this.model1 = data;
        this.fileList6.push({
          status: "success",
          message: "",
          url: this.baseUrl + data.businessLicense,
        });
      } else if (examineStatus == 2) {
        this.examineStatus = examineStatus;
        // 被驳回
        this.failModalShow = true;
        this.model1 = data;
        this.fileList6.push({
          status: "success",
          message: "",
          url: this.baseUrl + data.businessLicense,
        });
      }
    } else {
      // 没认证过
    }
  },
};
</script>

<style lang="scss">
page {
  background-color: #eee;
}
	.item__body__right__content__icon{
		padding-right: 30rpx !important;
	}
.org {
  background-image: url("https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/orgManger/orgbg.png");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% 100%;

  h1 {
    width: 620rpx;
    height: 120rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 530;
    color: #336c74;
    line-height: 40rpx;
    // margin: auto;
    padding-top: 60rpx;
    margin-left: 50rpx;
    margin-bottom: 30rpx;
  }

  .upload_box {
    width: 690rpx;
    background: #ffffff;
    box-shadow: 4px 6px 18px 0px rgba(30, 90, 102, 0.1);
    border-radius: 20rpx;
    opacity: 1;
    margin: auto;

    .text1 {
      padding-top: 40rpx;
      margin-left: 40rpx;
      margin-bottom: 20rpx;

      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #4e5969;
      line-height: 34rpx;
    }

    .u-upload__deletable {
      height: 50rpx;
      width: 50rpx;
      font-size: 20px;

      .u-upload__deletable__icon {
        top: 15rpx;
        right: 10rpx;
      }
    }

    .text2 {
      text-align: center;
      // margin-top: -50rpx;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #4e5969;
      margin-top: 20rpx;
    }

    .text_box {
      padding-left: 50rpx;
      padding-bottom: 10px;
      font-size: 10px;
      color: #b1c32d;
    }
  }

  .u-upload__wrap {
    // margin-bottom: 20rpx;
    margin: auto;
    border-radius: 10rpx;

    .u-upload__button {
      margin: 0;
      margin-bottom: 20rpx;
      border-radius: 10rpx;
    }

    .u-upload__wrap__preview__image {
      border-radius: 10rpx;
      margin: 0;
      width: 610rpx;
      height: 320rpx;
    }

    .upload_img_bg {
      margin: 0;
      width: 610rpx;
      height: 320rpx;
      margin-bottom: 20rpx;

      background-image: url("https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/orgManger/uploadBg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .upload_img {
        width: 96rpx;
        height: 96rpx;
      }

      .text2 {
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #4e5969;
        line-height: 34rpx;
      }
    }
  }

  .form {
    margin-top: 30rpx;
    // background-color: #fff;
    // padding-left: 20rpx;
    // padding-right: 20rpx;
    margin-left: 17px;
    margin-right: 17px;
    border-radius: 10px 10px 10px 10px;

    .u-form-item__body__left__content__label {
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #4e5969;
      line-height: 34rpx;
    }

    // margin-bottom: 100rpx;
    .u-form-item {
      border-radius: 10px 10px 10px 10px;
      background: #f3f8fe;
      margin-bottom: 15rpx;
      padding-left: 40rpx;
    }

    .u-input {
      background: #f3f8fe !important;
    }

    .u-line {
      visibility: hidden;
    }
  }

  .org_footer {
    margin-top: 46rpx;
    padding-bottom: 100rpx;

    // padding: 50rpx;
    .sumit {
      width: 690rpx;
      height: 112rpx;
      background: #66ffb5;
      box-shadow: 4px 6px 18px 0px rgba(31, 90, 102, 0.1);
      border-radius: 20rpx;
      font-size: 32rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #003941;
      line-height: 44rpx;
      text-align: center;
      // margin: auto;
      margin-top: 48rpx;
      margin-left: 15px;
      line-height: 112rpx;
    }

    .text11 {
      // width: 630rpx;
      height: 36rpx;
      font-size: 24rpx;
      font-weight: normal;
      color: #336c74;
      line-height: 36rpx;
      text-align: center;
      margin-top: 20rpx;
    }

    .audit_runtime {
      h1 {
        font-size: 20px;
        text-align: center;
      }

      h3 {
        text-align: center;
        color: #abadac;
      }
    }
  }

  .modal {
    .modal_content {
      margin: auto;
      text-align: center;

      .err {
        margin-top: 30rpx;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #004751;
      }

      .next_submit {
        margin-top: 10rpx;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #336c74;
      }

      .back_btn {
        margin-top: 28rpx;
        width: 254rpx;
        height: 72rpx;
        background: #66ffb5;
        box-shadow: 4px 6px 18px 0px rgba(31, 90, 102, 0.1);
        border-radius: 20rpx;
        line-height: 72rpx;
      }

      .msg {
        margin-top: 40rpx;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #336c74;
      }

      .phone {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #0cce71;
      }

      view {
        text-align: center;
      }
    }
  }
}
</style>
